<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="合同名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入合同名称"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入合同编号"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="签约日期" prop="signDate">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 220px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="合同性质" prop="nature">
        <el-input
          v-model="queryParams.nature"
          placeholder="请输入合同性质"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="viewList"
          v-hasPermi="['project:contract:list']"
        >查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--<el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="synchronize"
          v-if="isvalid"
        >同步</el-button>
      </el-col>
    </el-row>-->
    <div class="tablebox">
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @sort-change="tableSortChange"
        :default-sort="{prop: 'signDate', order: 'descending'}"
      >
        <el-table-column
          label="合同名称"
          align="left"
          prop="name"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          label="合同编号"
          align="center"
          prop="code"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          label="签约日期"
          align="center"
          prop="signDate"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.signDate,'{y}-{m}-{d} ') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="合同性质"
          align="center"
          prop="nature"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        ></el-table-column>
        <el-table-column width="200" label="操作">
          <template slot-scope="scope">
            <a @click="handleView(scope.$index, scope.row)" v-hasPermi="['project:contract:query']">
              <i class="el-icon-view aicon"></i>查看详情
            </a>
            <a
              @click="handleEdit(scope.$index, scope.row)"
              v-if="isvalid"
              v-hasPermi="['project:contract:edit']"
            >
              <i class="el-icon-edit aicon"></i>编辑
            </a>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="viewList"
      />
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <div class="tabletitle">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">合同名称</div>
              <div class="input-content">
                <el-input v-model="project.name" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">合同编号</div>
              <div class="input-content">
                <el-input v-model="project.code" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">签约日期</div>
              <div class="input-content">
                <el-input v-model="project.signDate" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">合同性质</div>
              <div class="input-content">
                <el-input v-model="project.nature" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同取费方法条款</div>
              <div class="input-content">
                <el-input
                  v-model="project.feeCollectionTerms"
                  placeholder="请输入"
                  :disabled="true"
                  type="textarea"
                  autosize
                  :rows="2"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同服务期条款</div>
              <div class="input-content">
                <el-input
                  v-model="project.serverTerms"
                  placeholder="请输入"
                  :disabled="true"
                  type="textarea"
                  autosize
                  :rows="2"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同服务内容备注</div>
              <div class="input-content">
                <el-input
                  v-model="project.serviceContentRemark"
                  placeholder="请输入"
                  :disabled="true"
                  type="textarea"
                  autosize
                  :rows="2"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同签约单位备注</div>
              <div class="input-content">
                <el-input
                  v-model="project.signingUnitRemark"
                  placeholder="请输入"
                  :disabled="true"
                  type="textarea"
                  autosize
                  :rows="2"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同项目概况备注</div>
              <div class="input-content">
                <el-input
                  v-model="project.projectOverviewRemark"
                  placeholder="请输入"
                  :disabled="true"
                  type="textarea"
                  autosize
                  :rows="2"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同其他备注</div>
              <div class="input-content">
                <el-input
                  v-model="project.otherRemark"
                  placeholder="请输入"
                  type="textarea"
                  autosize
                  :rows="2"
                  :disabled="true"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">合同特殊要求</div>
              <div class="input-content">
                <el-input
                  v-model="project.remark"
                  placeholder="请输入"
                  type="textarea"
                  autosize
                  :rows="2"
                  :disabled="!isEdit"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">附件</div>
              <div class="input-content">
                <vue-uploader
                v-if="open"
                :single-type="false"
                :file-list="project.bmsAttachments"
                @changeFileData="changeFile"
                @removeFileList="removeFileList"
                :pathName="pathName"
                :upload-readonly="!isEdit"
              />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { listContract, infoContract, updateContract, synchronizeContract } from '@/api/projectWorkbench/projectList/projectContract'
import aTitle from '@/components/Title'
import vueUploader from '@/components/Uploader';
export default {
  name: 'projectContract',
  components: { aTitle, vueUploader },
  props: {
    pathName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      open: false,
      isEdit: false,
      title: '',
      loading: true,
      total: 0,
      dialogVisible: false,
      tableData: [],
      dateRange: [],
      project: {
        name: '',
        code: '',
        signDate: '',
        nature: '',
        feeCollectionTerms: '',
        serverTerms: '',
        serviceContentRemark: '',
        signingUnitRemark: '',
        projectOverviewRemark: '',
        otherRemark: '',
        remark: '',
        attachmentIds: [],
        bmsAttachments: []
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        signDate: undefined,
        name: undefined,
        nature: undefined,
        projectId: undefined
      },
      isvalid: false,
    }
  },
  created () {
    this.viewList()
    this.queryParams.projectId = this.$route.params.id
    this.isvalid = sessionStorage.getItem('isvalid') === '1' ? true : false;
  },
  mounted(){
    document.title=document.getElementById("projectNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目主页/业务系统操作说明-项目主页-项目合同.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目主页-项目合同.xlsx")}`;
    },
    viewList () {
      //查询业务列表
      this.loading = true
      listContract(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        if (res.code === 200) {
          this.total = res.total
          this.tableData = res.rows
          this.loading = false
        }
      })
    },
    reset () {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.queryParams.name = undefined;
      this.queryParams.code = undefined;
      this.dateRange = [];
      this.queryParams.nature = undefined;
      this.viewList()
    },

    handleEdit (index, row) {
      this.isEdit = true;
      this.title = "编辑";
      this.open = true;
      this.dialogVisible = true
      infoContract(row.guid).then(res => {
        if (res.code === 200) {
          this.project = res.data
          this.project.signDate = this.parseTime(res.data.signDate, '{y}-{m}-{d} ')
        }
      })
    },
    handleView (index, row) {
      this.isEdit = false;
      this.title = "查看详情"
      this.dialogVisible = true;
      this.open = true;
      infoContract(row.guid).then(res => {
        if (res.code === 200) {
          this.project = res.data
          this.project.signDate = this.parseTime(res.data.signDate, '{y}-{m}-{d} ')
        }
      })
    },
    sumbit () {
      if (this.isEdit) {
        updateContract(this.project).then(res => {
          if (res.code === 200) {
            this.msgSuccess(res.msg);
            this.viewList()
            this.dialogVisible = false;
            this.open = false;
          }
        })
      }
      else {
        this.dialogVisible = false;
        this.open = false;
      }
    },
    //项目合同同步
    synchronize () {
      synchronizeContract({ projectId: this.$route.params.id }).then(res => {
        if (res.code === 200) {
          this.msgSuccess(res.msg);
          this.viewList()
        }
      })
    },
    tableSortChange (column) {
      this.queryParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.viewList();
    },
    changeFile (id, name) {
      this.project.attachmentIds.push(id)
    },
    removeFileList (id) {
      this.project.attachmentIds = this.project.attachmentIds.filter(
        item => item != id
      )
      this.project.bmsAttachments = this.project.bmsAttachments.filter(
        item => item.guid != id
      )
    },change(e) {
      this.$forceUpdate();
    }
  }
}
</script>
<style lang="scss" scoped>
.tabletitle {
  margin: 0 20px;
  .input-wrap {
    padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 8em;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 8px;
      display: flex;
      margin-top: 9px;
      flex: 0 0 120px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }
}
.tablebox {
  height: 100%;
}
/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  // text-align: center;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin: 0 10px;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}
</style>